<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				// 文档处理
				
				// 内部插入（子节点）
				$(".append").click(function(){
					// 在子元素之后插入
					
					// $("ul").append("<li>插入元素</li>")
					// appendTo 要插入到当前元素
					$("<li>插入元素</li>").appendTo("ul")
				})
				$(".prappend").click(function(){
					// 在子元素之前插入
					
					// $("ul").prepend("<li>插入元素</li>")
					// prependTo 要插入到当前元素
					$("<li>插入元素</li>").prependTo("ul")
				})
				
				// 外部插入（兄弟节点节点）
				$(".before").click(function(){
					// 在当前元素之前插入
					$("ul").before("<div>外部插入 before</div>")
				})
				$(".after").click(function(){
					// 在当前元素之前插入
					$("ul").after("<div>外部插入 after</div>")
				})
				
				// 替换
				$(".replaceWith").click(function(){
					$("li").replaceWith("<span>替换为span标签</span>")
					$('.li').replaceWith($('.lilili'))
				})
				$(".after").click(function(){
					$("li").replaceAll("<p>替换为p</p>")
				})
				
				// 在不变的元素body中设置ul子元素li增加其他功能仍然能显示，点击li列表内容显示
				$("body").on("click","ul li",function(){
					console.log($(this).text())
				})
			})
		</script>
	</head>
	<body>
		<button type="button" class="append">append</button>
		<button type="button" class="prappend">prappend</button>
		<br>
		<button type="button" class="before">before</button>
		<button type="button" class="after">after</button>
		<br>
		<button type="button" class="replaceWith">replaceWith</button>
		<button type="button" class="replaceAll">replaceAll</button>
		<ul>
			<li class="li">元素1</li>
			<li>元素2</li>
			<li>元素3</li>
			<li>元素4</li>
			<li>元素5</li>
		</ul>
	</body>
</html>
